组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

html代码：

JS代码：

渲染结果为：

或者另外一种注册方式，通过 全局API：Vue.extend()代码如下：

下面说明下Vue.extend( options )的使用。参数：{Object} options用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数。

{{firstName}} {{lastName}} aka {{alias}}

结果如下：

上面又用到了实例方法vm.$mount()，下面说明下它的使用方式。

参数：

返回值：vm - 实例自身用法：如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

这个方法返回实例自身，因而可以链式调用其它实例方法。

你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件：

这种封装也适用于其它可注册的 Vue 功能，比如指令。

像 、、、 这样的元素里允许包含的元素有限制，而另一些像  这样的元素只能出现在某些特定元素的内部。

例如：

自定义组件  会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性：

应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：

因此，请尽可能使用字符串模板。

如下代码：

那么 Vue 会停止运行，并在控制台发出警告，告诉你在组件实例中 data 必须是一个函数。我们来理解下，看下面代码：

由于这三个组件实例共享了同一个 data 对象，因此递增一个 counter 会影响所有组件！这就错了。我们可以通过为每个组件返回全新的数据对象来修复这个问题：

现在每个 counter 都有它自己内部的状态了,不会相互影响。

最常见的应用就是：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

实例1：

结果：hello!

实例2：HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：

如果你使用字符串模板，则没有这些限制。

你也可以使用 v-bind 的缩写语法：

（重要）如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：

然后：

将等价于：

初学者常犯的一个错误是使用字面量语法传递数值：

因为它是一个字面量 prop，它的值是字符串 "1" 而不是一个数值。如果想传递一个真正的 JavaScript 数值，则需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算：

Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

在两种情况下，我们很容易忍不住想去修改 prop 中数据：

对这两种情况，正确的应对方式是：1.定义一个局部变量，并用 prop 的值初始化它：

2.定义一个计算属性，处理 prop 的值并返回：

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。要指定验证规则，需要用对象的形式来定义 prop，而不能用字符串数组：

type 可以是下面原生构造器：String ，Number，Boolean，Function，Object，Array，Symbol。

type 也可以是一个自定义构造器函数，使用 instanceof 检测。

当 prop 验证失败，Vue 会抛出警告 (如果使用的是开发版本)。注意 prop 会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用。

其它实例：

twoWay Prop 的参数 移除。Props 现在只能单向传递。为了对父组件产生反向影响，子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。所以上面的的最后一个实例只是贴出来代码而已，最新版本已经移除了。

所谓非 prop 特性，就是指它可以直接传入组件，而不需要定义相应的 prop。

尽管为组件定义明确的 prop 是推荐的传参方式，组件的作者却并不总能预见到组件被使用的场景。所以，组件可以接收任意传入的特性，这些特性都会被添加到组件的根元素上。

例如，假设我们使用了第三方组件 bs-date-input，它包含一个 Bootstrap 插件，该插件需要在 input 上添加 data-3d-date-picker 这个特性。这时可以把特性直接添加到组件上 (不需要事先定义 prop)：

添加属性 data-3d-date-picker="true" 之后，它会被自动添加到 bs-date-input 的根元素上。

假设这是 bs-date-input 的模板：

为了给该日期选择器插件增加一个特殊的主题，我们可能需要增加一个特殊的 class，比如：

最终在根元素上生成的class值为：form-control date-picker-theme-dark。

我们知道，父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。

每个 Vue 实例都实现了事件接口，即：

Vue 的事件系统与浏览器的 EventTarget API 有所不同。尽管它们的运行起来类似，但是 $on 和 $emit 并不是addEventListener 和 dispatchEvent 的别名。

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

不能用 $on 侦听子组件释放的事件，而必须在模板里直接用 v-on 绑定，参见下面的例子。

有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native。例如：

会被扩展为：

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。要牢记：

这不过是以下示例的语法糖：

所以在组件中使用时，它相当于下面的简写：

所以要让组件的 v-model 生效，它应该 (从 2.2.0 起是可配置的)：

例子1：

例子2：货币输入的自定义控件

实例3：更加完善的货币过滤器

默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突：

上述代码等价于：

注意你仍然需要显式声明 checked 这个 prop。

完整的代码：html：

JS代码：

有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：

在复杂的情况下，我们应该考虑使用专门的状态管理模式Vuex。

来看一个完整的例子：html代码：

JS代码：

在使用组件时，我们常常要像这样组合它们：

注意两点：

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。使用特殊的  元素作为原始内容的插槽。

一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法：

正确做法：

假定 my-component 组件有如下模板：

父组件模板：

渲染结果：

 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

例如，假定我们有一个 app-layout 组件，它的模板为：

父组件模板：

渲染结果为：

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：

在父级中，具有特殊特性 slot-scope 的  元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象：

如果我们渲染上述模板，得到的输出会是：

在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于

作用域插槽更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项：

列表组件的模板：

解构

slot-scope 的值实际上是一个可以出现在函数签名参数位置的合法的 JavaScript 表达式。这意味着在受支持的环境 (单文件组件或现代浏览器) 中，您还可以在表达式中使用 ES2015 解构：

通过使用保留的  元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：

也可以直接绑定到组件对象上：

Welcome home!

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：

Vue 组件的 API 来自三部分——prop、事件和插槽：

使用 v-bind 和 v-on 的简写语法，模板的意图会更清楚且简洁：

尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。例如：

当 ref 和 v-for 一起使用时，获取到的引用会是一个数组，包含和循环数据源对应的子组件。

$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs。

在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，Vue.js 允许将组件定义为一个工厂函数，异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。例如：

工厂函数接收一个 resolve 回调，在收到从服务器下载的组件定义时调用。也可以调用 reject(reason) 指示加载失败。这里使用 setTimeout 只是为了演示，实际上如何获取组件完全由你决定。

推荐配合 webpack 的代码分割功能 来使用：

你可以在工厂函数中返回一个 Promise，所以当使用 webpack 2 + ES2015 的语法时可以这样：

当使用局部注册时，也可以直接提供一个返回 Promise 的函数：

自 2.3.0 起，异步组件的工厂函数也可以返回一个如下的对象：

注意，当一个异步组件被作为 vue-router 的路由组件使用时，这些高级选项都是无效的，因为在路由切换前就会提前加载所需要的异步组件。另外，如果你要在路由组件中使用上述写法，需要使用 vue-router 2.4.0 以上的版本。

当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。

在 HTML 模板中，请使用 kebab-case：

当使用字符串模式时，可以不受 HTML 大小写不敏感的限制。这意味实际上在模板中，你可以使用下面的方式来引用你的组件：

这意味着 PascalCase 是最通用的声明约定而 kebab-case 是最通用的使用约定。

组件在它的模板内可以递归地调用自己。不过，只有当它有 name 选项时才可以这么做：

当你利用 Vue.component 全局注册了一个组件，全局的 ID 会被自动设置为组件的 name。

如果稍有不慎，递归组件可能导致死循环：

上面组件会导致一个“max stack size exceeded”错误，所以要确保递归调用有终止条件 (比如递归调用时使用 v-if 并最终解析为 false)。

假设你正在构建一个文件目录树，像在 Finder 或资源管理器中。你可能有一个 tree-folder 组件：

{{ folder.name }}

以及一个 tree-folder-contents 组件：

当你仔细看时，会发现在渲染树上这两个组件同时为对方的父节点和子节点——这是矛盾的！当使用 Vue.component 将这两个组件注册为全局组件的时候，框架会自动为你解决这个矛盾。

然而，如果你使用诸如 webpack 或者 Browserify 之类的模块化管理工具来 require/import 组件的话，就会报错了：

在我们的例子中，可以选择让 tree-folder 组件中来做这件事。我们知道引起矛盾的子组件是 tree-folder-contents，所以我们要等到 beforeCreate 生命周期钩子中才去注册它：

另一种定义模板的方式是在 JavaScript 标签里使用 text/x-template 类型，并且指定一个 id。例如：

这在有很多大模板的演示应用或者特别小的应用中可能有用，其它场合应该避免使用，因为这将模板和组件的其它定义分离了。

尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：